﻿<DemoPageSectionComponent Id="Navigation-Toolbar-DropDown" ShowSizeMode="true">
    <ChildContentWithParameters Context="Params">
        <div class="card w-100">
            <div class="card-header p-2 demo-bg-transparent">
                <DxToolbar DropDownDisplayMode="@SelectedDisplayMode"
                           SizeMode="Params.SizeMode"
                           ItemRenderStyleMode="ToolbarRenderStyleMode.Plain">
                    <Items>
                        @foreach(var item in MenuItems) {
                            @RenderItem(item)
                        }
                    </Items>
                </DxToolbar>
            </div>
            <div class="card-body">
                <div style="@Formatting.GetStyleString()">
                    @*BeginHide*@
                    <span class="demo-preventsel">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor, imperdiet mauris. Fusce id purus magna.</span>
                    @*EndHide*@
                </div>
            </div>
        </div>
    </ChildContentWithParameters>
    <OptionsContent>
        <OptionComboBox Label="Drop Down Display Mode:"
                        Data="@(Enum.GetNames(typeof(DropDownDisplayMode)))"
                        Value="@(SelectedDisplayMode.ToString())"
                        ValueChanged="@((string selectedItem) => { SelectedDisplayMode = Enum.Parse<DropDownDisplayMode>(selectedItem); })" />
    </OptionsContent>

    @code{
        TextFormatting Formatting { get; set; } = new TextFormatting();
        List<TextFormattingMenuItem> _menuItems;
        List<TextFormattingMenuItem> MenuItems {
            get {
                if(_menuItems == null) {
                    _menuItems = new List<TextFormattingMenuItem>() {
                        @*BeginCollapse*@
                        new TextFormattingParentMenuItem(Formatting, "Format", new List<TextFormattingMenuItem>() {
                            TextFormattingMenu.FontFamilyMenuItem(Formatting),
                            TextFormattingMenu.FontSizeMenuItem(Formatting),
                            new TextFormattingParentMenuItem(Formatting, "Change case", new List<TextFormattingMenuItem>() {
                                new ChangeCaseMenuItem(Formatting, "Default", null),
                                new ChangeCaseMenuItem(Formatting, "Capitalize", "capitalize") { BeginGroup = true },
                                new ChangeCaseMenuItem(Formatting, "Lowercase ", "lowercase"),
                                new ChangeCaseMenuItem(Formatting, "Uppercase ", "uppercase")
                            })
                        }),
                        new TextDecorationMenuItem(Formatting, string.Empty, "Bold") {
                            IconCss = "tb-icon tb-icon-bold",
                            BeginGroup = true,
                            Tooltip = "Bold"
                        },
                        new TextDecorationMenuItem(Formatting, string.Empty, "Italic") {
                            IconCss = "tb-icon tb-icon-italic",
                            Tooltip = "Italic"
                        },
                        new TextDecorationMenuItem(Formatting, string.Empty, "Underline") {
                            Children = new List<TextFormattingMenuItem>() {
                                new TextDecorationMenuItem(Formatting, "Overline", "Overline"),
                                new TextDecorationMenuItem(Formatting, "Strikethrough", "Strikethrough")
                            },
                            SplitMenuButton = true,
                            IconCss = "tb-icon tb-icon-underline",
                            Category = "Text Decorations",
                            Tooltip = "Underline"
                        },
                        new ClearFormattingMenuItem(Formatting) { BeginGroup = true }
                        @*EndCollapse*@
                    };
                }
                return _menuItems;
            }
        }
        DropDownDisplayMode SelectedDisplayMode { get; set; } = DropDownDisplayMode.DropDown;
        RenderFragment RenderItem(TextFormattingMenuItem item) {
            return
                @<DxToolbarItem Text="@item.Text"
                                DropDownCaption="@item.Category"
                                BeginGroup="item.BeginGroup"
                                Click="item.Click"
                                Checked="item.Checked"
                                SplitDropDownButton="item.SplitMenuButton"
                                IconCssClass="@item.IconCss"
                                Tooltip="@item.Tooltip"
                                Enabled="item.Enabled">
                    <Items>
                        @if(item.Children != null) {
                            @foreach(var child in item.Children) {
                                @RenderItem(child)
                            }
                        }
                    </Items>
                </DxToolbarItem>;
        }
    }
</DemoPageSectionComponent>
